<template>
  <div class="left-content" v-loading="global.activeIndex !== 0 || global.activeIndex > 3"
    element-loading-text="审方中，请稍后..." element-loading-background="rgba(0, 0, 0, 0.1)">
    <div class="left-btn">
      <!-- <el-tooltip content="请在设备上放置患者处方、认定表及相关资料后，点击一键审方！"> -->
        <el-button type="primary" size="large" style="width: 100%" @click="gotoHome({ name: 'home' })">
          <img src="@/assets/images/check.png" class="btn-icon" />
          一键审方
        </el-button>
      <!-- </el-tooltip> -->
    </div>
    <div class="left-list">
      <div :class="{ 'list-item': true, 'active-bg': global.currentId == item.id }"
        v-for="(item, index) in global.leftList" :key="index" @click="gotoPage(item, index)">
        <el-icon>
          <Tickets />
        </el-icon>{{ item.name }}-{{ item.stateName }}
      </div>
    </div>
  </div>
</template>
<script setup>
import globalStore from "@/stores/modules/global"
import websocketPrintHook from "@/hooks/websocketPrint";
const loadingText = computed(() => {
  if (global.activeIndex == 1) {
    return '资料扫描中...'
  } else if (global.activeIndex == 2) {
    return 'OCR识别中...';
  } else if (global.activeIndex == 3) {
    return '患者信息匹配中...';
  } else {
    return ''
  }
})
const global = globalStore();
const router = useRouter();
const route = useRoute();
const { initWebSocket, errorMsg } = websocketPrintHook()
const gotoHome = async () => {
  router.push({ name: 'home' })
  global.currentId = ''
  global.activeIndex = 1
  global.loading = true
  initWebSocket()
}
const gotoPage = (item) => {
  global.currentId = item.id;
  if (item.state != 1) {
    router.push({ name: 'detail', query: { id: item.id } })
  } else {
    router.replace({ name: 'home', query: { id: item.id } })
    global.activeIndex = 3
  }
}
onMounted(() => {
  global.getLeftBarData() // 获取左侧导航数据
})
watch(() => route.query, (newVal) => {
  if (newVal) {
    global.currentId = newVal.id
  } else {
    global.currentId = ''
  }
})
</script>
<style scoped lang="scss">
.left-content {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .left-btn {
    flex-shrink: 0;
    padding: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
  }

  .left-list {
    flex: 1;
    overflow: auto;
    text-align: right;

    .list-item {
      padding: 12px 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .list-item:hover {
      color: #409eff;
      background: #f6f8fa;
    }

    .active-bg {
      color: #409eff;
      background: #f6f8fa;
      font-weight: 500;
    }
  }

  .btn-icon {
    width: 20px;
    margin-right: 12px;
  }
}
</style>